<template>
  <div class="app-container">
    <el-form :model="form" :rules="rules" label-width="100px" size="small" ref="ruleForm">
      <el-form-item label="案例标题" prop="title">
        <el-input class="input-w" placeholder="请输入标题" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="案例类型" prop="type">
        <el-radio-group v-model="form.type" class="input-w">
          <el-radio :label="1">家装</el-radio>
          <el-radio :label="2">工装</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="设计风格" prop="design_style">
        <el-select v-model="form.design_style" placeholder="请选择" class="input-w">
          <el-option
            v-for="item in style"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="作品类型" prop="design_type">
        <el-select v-model="form.design_type" placeholder="请选择" class="input-w">
          <el-option
            v-for="item in type"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布日期" prop="published_at">
        <el-date-picker
          v-model="form.published_at"
          type="datetime"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="工程地点" prop="project_address">
        <el-input class="input-w" placeholder="请输入工程地点" v-model="form.project_address"></el-input>
      </el-form-item>
      <el-form-item label="作品图片" required>
        <el-upload
          class="avatar-uploader el-upload-box"
          action="https://up-z2.qiniup.com"
          :on-success="handleCoverSuccess"
          :before-upload="beforeCoverUpload"
          :show-file-list="false"
          accept="image/*"
          :data="uploadData"
        >
          <img v-if="coverImg.url" :src="coverImg.url" class="avatar" style="width: 200px;">
          <i v-else :class="['avatar-uploader-icon', 'avatar', 'el-icon-plus']" style="width: 200px;"></i>
        </el-upload>
        <div class="recommended-style">推荐上传尺寸为750*400</div>
      </el-form-item>
      <el-form-item label="作品详情">
        <tinymce :height="250" v-model="form.content"></tinymce>
        <!--<el-input class="input-w" placeholder="请输入简介" type="textarea" v-model="form.content" :rows="4"></el-input>-->
      </el-form-item>
      <el-form-item class="dialog-footer">
        <!--<div slot="footer">-->
        <el-button @click="handleBack">返 回</el-button>
        <el-button type="primary"  @click="submitForm('ruleForm')">确 定</el-button>
        <!--</div>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import ElsUpload from '../../../components/element-r/upload/index'
  import axios from 'axios'
  // import { designer_case_show_detail, designer_case_add, designer_case_put } from '../../../api/index'
  import { STYLE_ORIGIN, TYPE_ORIGIN } from '../../../utils/dic'

  export default {
    components: {
      ElsUpload,
      Tinymce
    },
    data() {
      return {
        type: TYPE_ORIGIN,
        style: STYLE_ORIGIN,
        form: {
          type: 1
        },
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择案例类型', trigger: 'change' }
          ],
          design_style: [
            { required: true, message: '请选择风格', trigger: 'change' }
          ],
          design_type: [
            { required: true, message: '请选择类型', trigger: 'change' }
          ],
          published_at: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          project_address: [
            { required: true, message: '请输入工程地点', trigger: 'blur' }
          ]
        },
        imgs: [],
        maskFlag: '',
        showStart: '',
        qiniuUrl: 'http://pe0c33epi.bkt.clouddn.com/',
        uploadData: {
          token: '',
          key: ''
        },
        coverImg: {},
        projectId: 0
      }
    },
    methods: {
      beforeCoverUpload(file) {
        if (this.beforeUploadValidate(file)) {
          return axios({
            method: 'get',
            url: 'https://sjh.xmmost.com/api/qiniu/token',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            console.log(res)
            this.uploadData = {
              key: res.data.data.key,
              token: res.data.data.token
            }
            // console.log(this.uploadData)
            this.form.cover = this.uploadData.key
          })
        } else {
          return false
        }
      },
      handleCoverSuccess(res, file) {
        file.url = this.qiniuUrl + res.key
        this.coverImg = file
        // console.log(file)
      },
      beforeUploadValidate(file) {
        if (!file.type.startsWith('image')) {
          this.$message({ message: '仅支持图片格式文件', type: 'warning' })
          return false
        }
        if (file.size > 1024 * 1024 * 2) {
          this.$message({ message: '图片大小不能超过2MB', type: 'warning' })
          return false
        }
        return true
      },
      submitForm(formName) {
        if (!this.form.cover) {
          this.$message({ type: 'warning', message: '请上传图片' })
          return
        }
        console.log(this.form)
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.projectId) {
              // designer_case_put(this.form).then(res => {
              //   console.log(res)
              //   this.$message({ type: 'success', message: '修改成功' })
              //   this.$router.go(-1)
              // })
            } else {
              // designer_case_add(this.form).then(res => {
              //   console.log(res)
              //   this.$message({ type: 'success', message: '添加成功' })
              //   this.$router.go(-1)
              // })
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getInfo(id) {
        // const params = {
        //   id: id
        // }
        // designer_case_show_detail(params).then(res => {
        //   console.log(res)
        //   this.form = res
        //   this.coverImg.url = this.qiniuUrl + res.cover
        // })
      },
      handleBack() {
        // this.$router.push({ name: 'worksData' })
      }
    },
    mounted() {
      this.$route.params.id = parseInt(this.$route.params.id)
      if (this.$route.params.id !== 0) {
        console.log(123)
        this.projectId = this.$route.params.id
        this.getInfo(this.$route.params.id)
      }
    }
  }
</script>
